<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">{{name}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        name: "abc"
      }
    });
    // 第一个监听什么值  回调  1.变化之前的值  2.变化之后的值
    //$watch()函数，用于监视模型数据的变化。
    //参数1：监视的对象;  对象可以是：单个或多个变量； 数据；对象的属性；
    //参数2：监视数据改变执行的函数
    //参数3：可选 （布尔值） 默认为false：不监视对象深沉属性;  true：监视对象深沉属性。
    app.$watch('name',function (newval,oldval){   
      console.log(newval,oldval);
    })
</script>
</html>